<template>

        <el-table
          border
          width="100%"
          :data="coupons">
          <el-table-column label="优惠券名称" style="width: 210px">
            <template slot-scope="row">
              <el-select style="display: inline-block"  v-model="row.row.giftName" value-key="id" placeholder="请选择优惠券" @change="couponClick($event,row.$index)">
                <el-option v-for="(item,index) in couponList" :key="item.id" :label="item.name" :value="item" ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="优惠券数量" style="width: 100px">
            <template slot-scope="{row}">
              <el-input v-model="row.quantity" ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="月限量" style="width: 100px">
            <template slot-scope="{row}">
              <el-input v-model="row.availableQuantity"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" style="width: 80px">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                <a style="margin-left: 10px" @click="deleteAd(scope.$index)">
                  <i style="color: #F56C6C" class="el-icon-delete"></i>
                </a>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

</template>


<script>
  import { list } from '../../../api/coupon'

  export default {
    name: 'coupon',
    data(){
      return{
          coupons:[],
          couponList:[]
      }
    },

    created() {
      this.getCoupon()

    },
    props:["couponType"],
    methods:{
      getEditCoupon(){
      },
      deleteAd(index){
        this.coupons.splice(index, 1)
      },
      add(){
        var PromotionCoupons={
          giftId:'',
          giftName:'',
          quantity:0,
          availableQuantity:0,
        }
        this.coupons.push(PromotionCoupons)
      },
      getCoupon(){

        list().then(response =>{
          response.data.data.forEach(item=>{
            let coupon={
              name:item.name,
              id:item.id
            }
            this.couponList.push(coupon)
          })
        })
      },
      couponClick(data,index){
        console.log(data)
        console.log(index)
        this.coupons[index].giftId = data.id
        this.coupons[index].giftName = data.name
      }
    }
  }
</script>

<style scoped>


</style>
